<template>
    <view class='container'>
		<view class='top-container'  >
			<!-- <view @click="backPage">
				
				<view  class='logout'  hover-class="opcity" :hover-stay-time="150">
					<image class='logout-img' src='../../../static/images/addressBook/icon_out_3x.png'></image>
					<text class='logout-txt' >返回</text>
				</view>
			</view> -->
			<image class='bg-img' src='../../../static/images/addressBook/mine_bg_3x.png'></image>
			<view  class='user'>
				<image class='avatar-img' v-if="userInfo.avatar && userInfo.avatar.indexOf('.jpg')" :src='userInfo.avatar'></image>
				<image class='avatar-img' v-else src='../../../static/images/addressBook/mine_def_touxiang_3x.png'></image>
				<view class='user-info-mobile'>
					<text>{{userInfo.username}}</text>
					<view class='edit-img' hover-class="opcity" :hover-stay-time="150" >
						<!-- <image src='../../../static/images/addressBook/mine_icon_bianji_3x.png'></image> -->
					</view>
				</view>
				
			</view>
		</view>

		<view class="info-container">
			<tui-list-view title="" class="tui-list-view">
				<tui-list-cell  :hover="false" class="tui-list" >
					<text>真实姓名</text>
					<text class="tui-right">{{userInfo.realname}}</text>
				</tui-list-cell>
				<tui-list-cell  :hover="false" class="tui-list" >
					<text>性别</text>
					<text class="tui-right">{{userInfo.sex=='1'?'男':'女'}}</text>
				</tui-list-cell>
				<tui-list-cell  :hover="false" class="tui-list" >
					<text>工号</text>
					<text class="tui-right">{{userInfo.workNo}}</text>
				</tui-list-cell>
				<tui-list-cell  :arrow="true" class="tui-list" @click="cellPhone(userInfo.phone)">
					<text>电话</text>
					<text class="tui-right">{{userInfo.phone}}</text>
				</tui-list-cell>
				<tui-list-cell  :hover="false" class="tui-list" >
					<text>所在部门</text>
					<text class="tui-right">{{departMent}}</text>
				</tui-list-cell>
				
				<tui-list-cell  :hover="false" class="tui-list" >
					<text>生日</text>
					<text class="tui-right">{{userInfo.birthday}}</text>
				</tui-list-cell>
				
				<tui-list-cell  :hover="false" class="tui-list" >
					<text>邮箱</text>
					<text class="tui-right">{{userInfo.email}}</text>
				</tui-list-cell>
			</tui-list-view>
		</view>
		<tui-list-view title="" class="tui-list-view">
		 <view class="btn padlr20">
                <button type="primary" @click="sendMsg" >发送消息</button>
            </view>
			</tui-list-view>
    </view>
</template>

<script>
	import {tools,user,interFace} from '@/common/framework';
import {queryUserInfo} from '@/pages/addressBook/interface.js';
export default {
    data(){
        return {
			curUserInfo:{},
			userId:'',
			userInfo:{},
            departMent:'',
        }
	},
	onLoad(options){
		this.curUserInfo=user.getUserInfo();
		this.userId = options.id;
		this.getUserInfo();
	},
	methods: {
		backPage(){
			uni.navigateBack();
		},
		async getUserInfo(){
			let Res = await queryUserInfo({
				id:this.userId
			});
		
			if(Res && Res.success){
				
				this.userInfo = Res.result.userInfo;
				let temp = Res.result.departs.map(item=>{
					return item.departName;
				});
				this.departMent = temp &&temp.join(',')
			}else{
				tools.toast(Res.message || '保存失败');
			}
		},
		cellPhone(phone){
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		//发送消息事件
		sendMsg(){
			let messageInterFace = interFace.getInterface("message");
			messageInterFace.openUserMsgWin(this.userId, this.userInfo.realname, this.userInfo.avatar, this.curUserInfo.userId, 10, 'user');
		}
	},
}
</script>

<style lang="scss">
.container {
		position: relative;
	}

	.top-container {
		height: 440rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 440rpx;
	}

	.logout {
		width: 110rpx;
		height: 36rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 42rpx 0 24rpx 32rpx;
		position: relative;
		z-index: 2;
	}

	.logout-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 11rpx;
	}

	.logout-txt {
		font-size: 28rpx;
		color: #FEFEFE;
		line-height: 28rpx;
	}

	.user-wrapper {
		display: flex;
		justify-content: center;
		position: relative;
		z-index: 2;
	}

	.user {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 2;
		margin-top: 100upx;
	}

	.avatar-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		align-self: center;
	}

	.user-info {
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		align-items: center;
	}

	.user-info-mobile {
		margin-top: 30rpx;
		position: relative;
		font-size: 28rpx;
		color: #FEFEFE;
		line-height: 28rpx;
		align-self: center;
		padding: 0 50rpx;
	}

	.edit-img {
		position: absolute;
		width: 42rpx;
		height: 42rpx;
		right: 0;
		bottom: -4rpx;
	}

	.edit-img>image {
		width: 42rpx;
		height: 42rpx;
		padding-left: 25rpx;
	}
	
	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}
	.padlr20{
		padding-left: 30upx;
		padding-right: 30upx;
		padding-bottom: 30upx;
	}
	.page-section-title{
		margin-top: 50rpx;
	}
</style>